React Blog Website Design Tutorial | React UI Full Course for Beginners

You are watching the first part. Here are the next parts:

Join Lama Dev groups

0:00 Introduction
01:09 How to install a React App
04:33 React navbar tutorial
17:02 Creating React header
26:39 React sidebar example
34:10 Blog post component
44:25 Single post component
58:35 Create a new post component
01:09:50 User settings component
01:22:00 React Login and Register Page
01:31:33 React Router Dom Tutorial
01:44:56 Outro

[omprakashhardaha]

My Routes (react-router-dom v6) updated

<Routes>
<Route path="/" element={<><Home /></>}/>
<Route path="/login" element={(user ) ? <Home/>:<Login />} />
<Route path="/Setting" element={(user ) ? <Setting/>:<Register />} />
<Route path="/Write" element={(user ) ? <Write/>:<Register />} />
<Route path="/Register" element={ (user ) ? <Home/>:<Register />} />
<Route path="/Post:postId" element={<Single />} />
</Routes>


remember i didnt put all component into component folder

[tk]

Thanks a lot for your tutorial. It is very useful for a beginner. I 've finished this with react-router-dom 6 that has to change <Switch> to <Routes>
If anyone is confused with the RRD6 like I was, these are the code inside the <div classname = "App">
<Router>
<TopBar />
<Routes>
<Route path="/" exact
<Route path="/register" element={user ? <Home/> : <Register />} ></Route>
<Route path="/login" element={user ? <Home/> : <Login />} ></Route>
<Route path="/write" element={user ? <Write /> : <Register />} ></Route>
<Route path="/settings" element={user ? <Settings /> : <Register/>} ></Route>
<Route path="/post/:postId" element={<Single />} ></Route>
</Routes>
</Router>

[Williams]

1:34:10 If this isn't working for you, try this:
<Router>
<TopBar />
<Routes>
<Route exact path="/" element={<Home/>} />
<Route path="/register" element={<Register/>} />
<Route path="/login" element={<Login/>} />
<Route path="/write" element={<Write/>} />
</Routes>
</Router>
Instead of Switch, import Routes

[menandmice]

I really like how you go through everything instead of copying and pasting. Tutorials become longer that way but it is still better in that way. Copying and pasting can used from time to time but not as general method in my view.

[ailtonjunior]

For those who are having difficulty in the routes:
function App() {
return(
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="register" element={<Register />} />
</Routes>
</Router>
);
}

[tracybonham]

This is a great tutorial! But, within the last month or so, with the React Router v6 update, they changed the routing syntax. They replaced <Switch> to <Routes>. and the paths to <Route path="/"> exact element={<Home />} </Route> This broke a few things.

[scorpion]

I really love your lessons, you deserve a lot more subscribers.
Are you going to also show how to deploy this project on a free hosting site?

[tobyroy]

Creating a blog using React JS is a great way to learn a range of features. You have structured this exquisitely and I really can't thank you enough 🙏🏾

[srikrishna]

hi lama, appreciate your effort. Could you please make a video explaining how to make the website responsive.

[Corntrop]

I love your designs. When mern part is coming?

[frm-bestandfunnyvideos]

Hello Lama, thank for this vidéo, just one question please: how to make blog responsive ?Thank you

[wibusad]

I use react-router-dom @6.2.2 and 'switch' is doesn't exist 😭😭😭

[losbur]

Whenever I visit this channel i understand how excited these lessons are especially for beginner like me. Thanks a lot, no doubts the channel will become very attractive sooner or later for who enjoy dev :)

[sanamhamza]

now i learned react after watching many tutorials, it was great for beginners, thanks alot !

[mathewsjoby]

If you are trying to work out what's wrong with your code, it ain't the code but the style. This code is outdated. especially Switch. you can use Routes instead.

[alenjose]

You are a great teacher please make videos on AI and React native also

[nasiruddinkhan]

When I completing the project, I used React Router DOM v6.2.2. But Switch function is not working. can you help me to solve this problem.

[AdamMaichrzik]

You are AWESOME! Liked, subscribed, turned on the bell, joined the fb group. What can I do more for you? If I will get my job as a web developer you are definitely getting a coffee donate! :D

[cyronarieri]

i would love to know where you learnt CSS from or atleast recommend resources that touch comprehensively on css. otherwise its great content i have learnt alot of new things

[ahmedahmed-ztqx]

Can you sr build lms website like udemy with mern stack