Day -1 : Getting Started with ReactJs
Goal : To create a React project with a single React Component
Pre-requisite: Install Nodejs as npm has been used to create and manage dependencies.
Development Steps :
- Create a new empty directory called ‘helloreact’
- Inside the folder helloreact run command prompt and run the command ‘npm init’
This command will be used to create package.json. Keep pressing Enter until it starts asking question. At this stage package.json would look like as following
- Install react and react-dom with this command : npm install –save react react-dom
- Install other required plugins such as webpack and babel with following command
npm install — save-dev html-webpack-plugin webpack webpack-dev-server babel-core babel-loader babel-preset-react
Babel.js is used to compile JavaScript. So Babel transforms JSX into actual JavaScript.
webpack-dev-server — provides a development server to see the changes immediately while developing
At this point, the package.json will look like
As in package.json there are 3 different command has been specified inside script. production will help us to minified all js code and start will start the webpack-dev-server
- create a folder called ‘app’ and inside /app folder create index.html and index.js
- add bootstrap in the index.html as bootstrap will be used for styling
In index.html, <div id=”app”> </div> is very important. As the react app will be loaded with this div element
- Next step is to create a React Component in app/index.js
Line 1 , a variable named ‘React’ has been created which actually load reactjs library. RequireJs here to get the credit!
Line 2, similarly another variable has been created for ‘ReactDOM’ . ReactDOM module exposes DOM-specific methods, while React has the core tools shared by React on different platforms
HelloWorld is a React Component. createClass has been used to create a React Component.
The next is to render the React element. ReactDOM.render() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument. Here the div element in index.html with id =app is the raw DOM element. ReactDOM.render() takes two argument. first is the component and second is the raw DOM element.
- Now we have to convert the react Jsx to simple javascript in order to make browser understand it. For this, we have to create webpack.config.js on the root of our project
loaders has been configured to convert all .js and .jsx file except any file inside node_modules folder to the file ‘index_bundle.js’ inside ‘dist’ folder. in order make this happen we have to add presets react in .babelrc
HTMLWebpackPluginConfig is a template variable where it will create a new html file in the output folder ‘dist’ with name index.html but also inject the index_bundle.js in the html file. Therefore dist folder will have two files index.html and index_bundle.js
So at this point the folder structure is as following
- run ‘npm run start’ to start the webpack-dev-server
- on browser localhost:8080 and we can see the first React Component ‘HelloWorld’. voilà!
I must acknowledge the Reactjs Fundamental tutorial !
