Our first React application
permalinkToday we are looking into building our first app in React.
I've been experimenting with React
, Vue
and Angular
so far React has been a stable work horse with a lot of features. Hence this tutorial on how to start our first app in React.
React of course is build on top of JavaScript, so make sure you have a good enough understanding of Vanilla JavaScript.
React good to knows permalink
There are a couple things we have to keep in mind when building React applications.
- React is build with components, components are small and reused through your application.
- Props are how we can make components dynamic, we can pass props through components. Props cannot be changes however.
- State is a variable in every component, a state can hold information dynamically. So very similar to props, but states are private and fully controlled by its component.
- JSX is a XML/HTML-Like syntax that React uses so we can have HTML in our components.
Creating our first React app permalink
Make sure we have Node.js
installed, then open your favourite terminal and run the following command:
npm install -g create-react-app
This will install the React CLI globally (-g option).
Next we can create a new app
create-react-app react-starter
This creates our first React application and automatically create the following files for us:
Running our React app permalink
to run the application we run the following command:
cd react-starter
yarn start
Now we can open up http://localhost:3000/ to see our very first React application!
A basic Component in React permalink
Let's have a look into how a basic component in React looks.
import React from 'react';
import './App.css';
import Child from './components/child';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className="App">
<Child />
</div>
);
}
export default App;
As you can see we first do some imports to define what elements this component is going to use.
We can import css
files, Other components and more.
Then we have a open a function which will define our Component, in the end we export our component.
Check out our next day React props and components tip
Feel free to download a starter template from GitHub.
Or read more on the React website
Thank you for reading, and let's connect! permalink
Let me know what React topics you would like to see in more depth and feel free to subscribe to my email newsletter and connect on Facebook or Twitter.