Sarah
Sarah

Reputation: 25

React JS beginner program error

Screensnot of my project folder can any please help me to start a new simple project in Sublime.. this is my index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class Blog extends Component {
  render(){

  const sidebar = (
    <ul>
      {this.props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );

  const content = this.props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
   return (
     <div>
      {sidebar}
      <hr />

       {content}
     </div>
   );
 }
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts}
     />,
  document.getElementById('root')
);

this is my package.json

 {
  "name": "mypro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "eslint": "^4.18.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "react-scripts": "^1.1.1"
  }
}

is there any thing needed for run this project.. I'm trying to run this project cmd by installing react,reactdom etc then i install npm by npm i. Then I'm trying to run project my npm run start

in cmd

   > [email protected] start E:\Projects\MyPro
> react-scripts start

Could not find a required file.
  Name: index.html
  Searched in: E:\Projects\MyPro\public

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "run" "start"
npm ERR! node v7.10.1
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mypro package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mypro
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mypro
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\keystrokeslnc08\AppData\Roaming\npm-cache\_logs\2018-03-15
T08_39_46_854Z-debug.log

this is my index. html page

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyProject</title>
  </head>
  <body>
    <h1>hlo everyone</h1>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

this errors shows.. What I'll do next??

Upvotes: 0

Views: 1072

Answers (2)

Viraj
Viraj

Reputation: 666

best way to start a reactjs simple project

first install nodejs (you need a server to run your app locally)

open command prompt

1: npm install -g create-react-app

2: create-react-app your-app-name

go to directory path (ex: cd your-app-name)

finally : npm start

that's it

Upvotes: -1

benjamin Rampon
benjamin Rampon

Reputation: 1416

You should have react-scripts as a devDependencies in your package.json

npm install --save-dev react-scripts

Should be better

Upvotes: 2

Related Questions