Simply steps of installation of ReactJS and how to create ReactJS project. you should know about basic of Node.js
First, we learn basic of ReactJS, ReactJS is component-based architecture. Component-based means UI logic is limited with component, components work same any position in UI like an Angular directive
Each component made with below code
|
1 2 3 4 5 6 7 8 9 10 11 |
class Helloworld extends React.Component{ render(){ return (<h1>HelloWorld</h1>) } } ReactDOM.render(<Helloworld />,document.getElementById('root')) |
First, Install the globe package
Linux based OS
|
1 2 3 4 5 |
sudo npm install -g create-react-app |
Other OS
|
1 2 3 4 5 |
npm install -g create-react-app |
You can create a new app with the command
|
1 2 3 4 5 |
create-react-app helloworld |
If create-react-app not work then you can use installation path create-react-app like
|
1 2 3 4 5 |
Users/username/.npm-packages/lib/node_modules/create-react-app/index.js helloworld |
After complete all process of installation.
|
1 2 3 4 5 |
npm start |
Now go to src/index.js
and just clean all code write alert(‘ok’); and save file. and check browser http://localhost:3000 so you can understand whatever javascipt write here it’s direct execute in a browser.
Try below code for how can component work
|
1 2 3 4 5 6 7 8 9 10 11 |
class Helloworld extends React.Component{ render(){ return (<h1>HelloWorld</h1>) } } ReactDOM.render(<Helloworld />,document.getElementById('root')) |
save file. and check browser http://localhost:3000
More Stories
Deep Dive in JSX – ReactJS
State and Props in ReactJS
Events and Uni Directional Data Flow in ReactJS