Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bac51fc

Browse files
author
App Generator
committed
Minor Updates
1 parent 0d1bdf7 commit bac51fc

File tree

4 files changed

+66
-10
lines changed

4 files changed

+66
-10
lines changed

‎LICENSE‎ renamed to ‎LICENSE.md‎

File renamed without changes.

‎README.md‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,55 @@
1-
# sample-react-chakra-ui-introduction
1+
# [React Chakra Introduction](https://blog.appseed.us/chakra-ui-react-coding-landing-page/)
2+
3+
Sample Code for the blog article [React Chakra UI Components - Learn by Coding](https://blog.appseed.us/chakra-ui-react-coding-landing-page/) - Provided by `AppSeed`.
4+
5+
The article explains how to use the Chakra UI library in React.js by building a responsive website. The website will be built with Chakra components only, no HTML element will be used.
6+
7+
- 👉 [React Chakra Landing Page](https://react-chakra-ui-landing-page.appseed-srv1.com/) - LIVE Demo
8+
- 👉 [React Apps](https://appseed.us/apps/react) - index provided by `AppSeed`
9+
10+
<br />
11+
12+
![React MUI Introduction - Sample Page crafted with MUI.](https://user-images.githubusercontent.com/51070104/163208108-81305831-7bee-4cdf-ba44-6382c31e58a6.gif)
13+
14+
<br />
15+
16+
## How to use it
17+
18+
- Install `NodejS` - version 14.x or higher
19+
- Install dependencies via `yarn`
20+
- Start the project: `yarn start`
21+
22+
<br />
23+
24+
## Components
25+
26+
- `Header`
27+
- `Hero`
28+
- `Info Section`
29+
- `AboutUs`
30+
- `Testimonial`
31+
- `ContactUs`
32+
- `Footer`
33+
34+
<br />
35+
36+
## What is React.js
37+
38+
React.js is a JavaScript library that allows you to build fast and efficient web applications using the minimum amount of code possible. In React.js, you can break the web layout into components - reusable bits of code that return HTML elements.
39+
40+
- 👉 [JavaScript concepts for React Beginners](https://blog.appseed.us/10-javascript-concepts-for-react-beginners/)
41+
42+
<br />
43+
44+
## Chakra UI Library
45+
46+
Chakra UI is a library that allows you to build stunning and modern web applications using various layout components. It differs from other UI frameworks in that it offers accessibility and dark mode support by default.
47+
48+
With Chakra UI, you spend less time building responsive and beautiful websites. If you want to create a web application that allows users to switch between different color modes with minimal lines of code, then Chakra UI is an excellent choice.
49+
50+
- 👉 [Chakra UI](https://chakra-ui.com/) - official website
51+
52+
<br />
53+
54+
---
55+
[React Chakra Introduction](https://blog.appseed.us/chakra-ui-react-coding-landing-page/) - provided by AppSeed

‎src/components/Hero.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,12 @@ const Hero = () => {
2929
mb="4"
3030
>
3131
{' '}
32-
Let's scale your business
32+
Chakra UI Sample
3333
</Text>
3434

3535
<Text mb="6" fontSize={isLargerThanLG ? 'lg' : 'base'} opacity={0.7}>
36-
Hire professionals who will help your business make 10X your previous
37-
income. With over 5years experience in Marketing & Business strategy,
38-
we are your best client.
36+
Sample Code for the blog article React MUI Components - Learn by Coding. The article explains how to code from scratch all components:
37+
navBar, hero section, app features, contact, and footer.
3938
</Text>
4039

4140
<Button
@@ -45,8 +44,12 @@ const Hero = () => {
4544
h="50px"
4645
size={isLargerThanLG ? 'lg' : 'md'}
4746
mb={isLargerThanLG ? '0' : '10'}
47+
onClick={(e) => {
48+
e.preventDefault();
49+
window.location.href='https://blog.appseed.us/chakra-ui-react-coding-landing-page/';
50+
}}
4851
>
49-
HIRE US
52+
Read More
5053
</Button>
5154
</Box>
5255
<Spacer />

‎src/components/Nav.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,9 @@ const Nav = ({ onOpen, ref }) => {
5050

5151
{isLargerThanMD ? (
5252
<>
53-
<Text fontSize="md" mr="10">
54-
About
55-
</Text>
56-
<Text fontSize="md">More Apps</Text>
53+
<a target="_blank" rel="noreferrer" href="https://appseed.us/apps/react/" fontSize="md" mr="10">
54+
More Apps
55+
</a>
5756
</>
5857
) : (
5958
<IconButton ref={ref} onClick={onOpen}>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /