CSFundamental
Published in

CSFundamental

Day 4: First React App

Tutorial on function components in React

In order to start with the app, we need to first install the node into the system. And then you need these simple commands to start the project.

npx create-react-app first-appcd first-appnpm start

It is a good practice to put all your components in one folder. Create a component folder in the src folder and add welcome.js file.

add components folder in src folder

As we discussed in the last lessons, we will create a function-based component. Add these lines of code into your welcome.js file.

import React from 'react';function Welcome(){return <h1>hey there!!</h1>}export default Welcome

line 1: we are importing React from the react module.

line 2: we created a function-based component called Welcome and it simply returns “hey there!!”.

line 3: exporting our function so it can be called in other parts of the project.

now, we have to tell our main app that there is one component we want to use. So, in your App.js file, add the following code.

import './App.css';import React from 'react';import Welcome from './components/welcome';function App() {return (<div className="App"><Welcome/></div>);}export default App;

line 1: importing the CSS file.

line 2: import React.

line 3: we are importing our functional component.

line 4: the function App enclosed our Welcome component and that is enough to print on the screen.

line 5: exporting the App.

that’s all for this lesson, meet you tomorrow !!

Photo by AltumCode on Unsplash

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saranjeet Singh

Saranjeet Singh

61 Followers

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .