Learn how to create Your First React App From Scratch.
Building UI nowadays has become relatively easy as it used to be with the evolution of frontend javascript libraries and frameworks.React, Angular, Vue are some of the prominent ones.React being the most widely used one.
Getting started with react requires some configuration with webpack and babel.Thankfully developers of react have provided us with a boilerplate react app to get started instantly.To get started assuming you have one of npm or yarn package package manager.
npx create-react-app YOURAPPNAME
or
yarn create-react-app YOURAPPNAME
This will create a biolerplate react app .
npm start
Visit localhost:3000 to start your react-app.
But if you want to get started from scratch then this article is for you.
How to get started with react from scratch?
Step 1:Create a folder of your desired name and inside that folder run
npm init -y
This will create a starter package.json file
Step 2 :Install necessary dependencies
npm i --save-dev webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react html-loader html-webpack-plugin inline-source-map
npm i --save react react-dom
or
yarn add -D webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react html-loader html-webpack-plugin inline-source-map
yarn add react react-dom
Step 3: Create a **webpack.config.js* file alongside package.json file.
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
plugins: [new HtmlWebpackPlugin()],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
hot:true,
liveReload:true
},
devtool:'inline-source-map,
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
{
test: /\.html$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'html-loader',
}
}
]
}
};
Step 4: Create a src directory and index.js ,App.js ,index.html inside it.
Step 5: Babel config.Create a .babelrc file in your root folder.
{presets: ['@babel/preset-env',@babel/preset-react]}
Step 6:create react app
**index.js**
import React from 'react'
import {render} from 'react-dom'
import App from './App
render(<App/>,
documentElementbyId('root')
)
**App.js**
import React from 'react'
export default function App(){
return (<div>Hello</div>)
}
**index.html**
<html>
<head>
</head>
<body>
<div id='root'></div>
</body>
</html>
Step 6: Create scripts in package.json
"start":"webpack-dev-server",
"build":"webpack --watch"
All Set.
npm start
For production build
npm run build
This is the setup behind the create-react-app.
Check out my website C7ech from more.
Top comments (0)